<template>
  <view class="wanl-success">
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
      <view
        class="cu-bar bg-bgcolor fixed"
        :style="{
          height: $wanlshop.wanlsys().height + 'px',
          paddingTop: $wanlshop.wanlsys().top + 'px',
        }"
      >
        <view class="action" @tap="onBackUser"><text class="wlIcon-fanhui1"></text></view>
        <view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
          <text>{{ title }}完成</text>
        </view>
      </view>
    </view>

    <view class="content">
      <text class="icon wlIcon-pintuantuangouchenggong"></text>
      <text class="text-lg margin-tb">{{ title }}已成功</text>
      <view class="button padding-xl margin-top-lg">
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'comment'"
          @tap="$wanlshop.to('/pages/user/comment/comment')"
        >
          查看评论
        </button>
        <block v-if="type == 'pay'">
          <button
            v-if="order_type == 'goods'"
            class="cu-btn block wanl-bg-orange margin-tb-sm lg"
            @tap="$wanlshop.to('/pages/user/order/order')"
          >
            查看订单
          </button>
          <button v-if="order_type == 'vip'" class="cu-btn block wanl-bg-orange margin-tb-sm lg" @tap="onUser">
            查看会员
          </button>
          <button
            v-if="order_type == 'groups'"
            class="cu-btn block wanl-bg-orange margin-tb-sm lg"
            @tap="$wanlshop.to('/pages/apps/groups/order/order')"
          >
            查看拼团订单
          </button>
        </block>
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'feedback'"
          @tap="$wanlshop.to('/pages/user/feedback/lists')"
        >
          查看反馈
        </button>
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'complaint'"
          @tap="$wanlshop.to('/pages/user/complaint/lists')"
        >
          查看举报
        </button>
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'withdraw'"
          @tap="$wanlshop.to('/pages/user/money/witlist')"
        >
          查看提现列表
        </button>
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'teamWithdraw'"
          @tap="$wanlshop.to('/pages/user/team/witlist')"
        >
          查看提现列表
        </button>

        <button
          class="cu-btn block bg-red margin-tb-sm lg"
          v-if="type == 'find'"
          @tap="$wanlshop.to('/pages/apps/find/user')"
        >
          查看创作中心
        </button>
        <button
          class="cu-btn block wanl-bg-orange margin-tb-sm lg"
          v-if="type == 'recharge'"
          @tap="$wanlshop.to('/pages/user/money/money')"
        >
          查看钱包
        </button>
        <button class="cu-btn block line-gray margin-tb-sm lg" @tap="onIndex">返回首页</button>
      </view>
    </view>
  </view>
</template>

<script>
import LuckyDraw from '@/components/luckydraw';
import { mapGetters } from 'vuex';
import api from '@/common/request/request';
import RedPacket from '@/components/red-packet';
export default {
  // components: { RedPacket, LuckyDraw },
  data() {
    return {
      type: '',
      order_type: 'goods',
      title: '',
      drawConfig: {
        lucky_num: 0,
        score: '',
        score_num: 0,
      },
      isDrawStart: false,
      winItem: {},
    };
  },
  computed: {
    ...mapGetters('common', ['integralName']),
  },
  onLoad(options) {
    if (options.type == 'pay') {
      this.title = '支付';
      this.order_type = options.order_type;
      // api.get({
      //   url: '/wanlshop/lucky/index',
      //   success: res => {
      //     this.drawConfig = res;
      //   },
      // });
    } else if (options.type == 'comment') {
      this.title = '评论';
    } else if (options.type == 'feedback') {
      this.title = '反馈';
    } else if (options.type == 'withdraw') {
      this.title = '请等待后台审核，提交';
    } else if (options.type == 'recharge') {
      this.title = '充值';
    } else if (options.type == 'complaint') {
      this.title = '举报';
    } else if (options.type == 'find') {
      this.title = '作品上传';
    }
    this.type = options.type;
  },
  methods: {
    async draw(type = 1) {
      if (type == 2 && !this.isDrawStart) {
        const modal = await new Promise(resolve => {
          uni.showModal({
            content: `确定消耗${this.drawConfig.score_num}${this.integralName}抽奖`,
            success: res => {
              if (res.confirm) {
                resolve(true);
              } else if (res.cancel) {
                resolve(false);
              }
            },
          });
        });
        if (!modal) {
          return;
        }
      }
      this.$refs.luckyDraw.start(type);
    },
    drawFinished(item) {
      console.log('finish');
      this.winItem = item;
      this.isDrawStart = false;
      this.$refs.redPacket.open(item);
      // this.$refs.redPacket.playAudio();
    },
    onIndex() {
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'white',
      });
      uni.switchTab({
        url: '/pages/index',
      });
    },
    onUser() {
      uni.switchTab({
        url: '/pages/user',
      });
    },
    onBackUser() {
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'white',
      });
      uni.switchTab({
        url: '/pages/user',
      });
    },
  },
};
</script>

<style>
.wanl-success .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wanl-success .content .icon {
  font-size: 180rpx;
  color: #3aa112;
  margin-top: 150rpx;
}
.wanl-success .content .button {
  width: 100%;
}
.disabled {
  background: lightgray;
  color: #666666;
}
</style>
